/**
 * Created by xiangjiayu on 2017/6/26.
 * 新增订单
 */

import React from 'react';
import {
  Table,
  Icon,
  Button,
  Tooltip,
  Row,
  Col,
  Input,
  Select,
  DatePicker,
  Cascader,
  Radio,
  Dropdown,
  Checkbox,
  Modal,
  Form,
  Popconfirm,
  Upload,
  Anchor,
  Progress
} from 'antd';
import MyIcon from '../../components/common/MyIcon/MyIcon'; //自定义字体图标
import AddressSelect from '../../components/common/AddressSelect/AddressSelect';//省市级联
import CheckBox from '../../components/common/CheckBox/CheckBox';//自定义 多选框


const ButtonGroup = Button.Group;       //组合按钮
const Option = Select.Option;           //下拉框
const FormItem = Form.Item;
const {MonthPicker, RangePicker} = DatePicker;//日历
const {Link} = Anchor;

const formItemLayout = {
  labelCol: {
    sm: {span: 3},
  },
  wrapperCol: {
    sm: {span: 5},
  },
};


export default class AuntAdd extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isShowCuser: false,//客户其他信息展开状态
      //弹窗
      ModalOrderSource: false,         //管理订单来源
      Modalvideo: false,
      value: this.props.value,
      editable: this.props.editable || false,
      //上传图片
      previewVisible: false,
      previewImage: '',
      fileList: [{
        uid: -1,
        name: 'xxx.png',
        status: 'done',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      }],

    };
  }

  //客户其他信息展开状态
  CuserContSlide = (e) => {
    this.setState({
      'isShowCuser': !this.state.isShowCuser,
    })
  }
  //弹窗
  //管理订单来源
  showModalOrderSource(ModalOrderSource) {
    this.setState({ModalOrderSource});
  }

  showModalvideo(Modalvideo) {
    this.setState({Modalvideo});
  }

  // 上传图片
  handleCancel = () => this.setState({previewVisible: false})
  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  }
  handleChange = ({fileList}) => this.setState({fileList})
  //锚点
  scrollToAnchor = (anchorName) => {
    if (anchorName) {
      let anchorElement = document.getElementById(anchorName);
      if (anchorElement) {
        anchorElement.scrollIntoView();
      }
    }
  }

  render() {
    const {value, editable} = this.state;
    let data_sex = [{
      text: '男',
      state: true,
      type: 'radio'
    }, {
      text: '女',
      state: '',
      type: 'radio'
    }];
    let data_age = [{
      text: '7个月以下',
      state: true,
      type: 'radio'
    }, {
      text: '7-12个月',
      state: '',
      type: 'radio'
    }, {
      text: '13-24个月',
      state: '',
      type: 'radio'
    }, {
      text: '24个月以上',
      state: '',
      type: 'radio'
    }];
    let data_zhujia = [{
      text: '住家',
      state: true,
      type: 'radio'
    }, {
      text: '不住家',
      state: '',
      type: 'radio'
    }, {
      text: '不限',
      state: '',
      type: 'radio'
    }];
    let data_skill = [{
      text: '做辅食',
      state: true
    }, {
      text: '早教',
      state: ''
    }, {
      text: '唱儿歌',
      state: ''
    }, {
      text: '室外活动',
      state: ''
    }, {
      text: '辅导班接送',
      state: ''
    }];

    //客户其他信息
    let data_children = [{
      text: '无',
      state: true,
      type: 'radio'
    }, {
      text: '有',
      state: '',
      type: 'radio'
    }];
    let data_oldpeople = [{
      text: '无',
      state: true,
      type: 'radio'
    }, {
      text: '有',
      state: '',
      type: 'radio'
    }];
    let data_food = [{
      text: '偏甜',
      state: true,
    }, {
      text: '偏辣',
      state: '',
    }, {
      text: '偏咸',
      state: '',
    }, {
      text: '清淡',
      state: '',
    }];
    let data_food2 = [{
      text: '偏甜',
      state: true,
    }, {
      text: '偏辣',
      state: '',
    }, {
      text: '偏咸',
      state: '',
    }, {
      text: '清淡',
      state: '',
    }, {
      text: '清淡',
      state: '',
    }, {
      text: '清淡',
      state: '',
    }, {
      text: '清淡',
      state: '',
    }, {
      text: '清淡',
      state: '',
    }];
    let data_pet = [{
      text: '无',
      state: true,
    }, {
      text: '猫',
      state: '',
    }, {
      text: '小型犬',
      state: '',
    }, {
      text: '大型犬',
      state: '',
    }];
    //订单来源
    //let dataOrderSource = data.AuntAddTable;
    const dataOrderSource = [{
      key: '1',
      name: '胡彦斌'
    }, {
      key: '2',
      name: '胡彦祖',
    }];
    const columns = [{
      title: '来源名称',
      dataIndex: 'name',
      width: '70%'
    }, {
      title: '操作',
      dataIndex: 'operation',
      width: '30%',
      render: () => {
        return (
          <div className="table-a-cont">
            <a href="javascript:void(0)">编辑</a>
            <Popconfirm placement="topRight" title="确定删除?">
              <a href="javascript:void(0)" className="col-red">删除</a>
            </Popconfirm>
          </div>
        )
      },
      className: 'ant-table-th-center'
    }];
    const {previewVisible, previewImage, fileList} = this.state;
    const uploadButton = (
      <div>
        <Icon type="upload"/>
        <div className="ant-upload-text">上传</div>
      </div>
    );
    return (
      <div className="order-add">
        <div className="slip-title">
          <div className="slip-base">
            <div className="slip-left">
              <h4>新增月嫂</h4>
            </div>
          </div>
          <div className="slip-scroll">
            <a onClick={() => this.scrollToAnchor('components-anchor-base')} title="请填写客户信息">基本信息</a>
            <a onClick={() => this.scrollToAnchor('components-anchor-family')} title="从业经历/家庭成员">从业经历/家庭成员</a>
            <a onClick={() => this.scrollToAnchor('components-anchor-picture-vedio')} title="月嫂相册视频信息">月嫂相册视频信息</a>
          </div>
        </div>
        <div className="slip-body" id="Test">
          {/*请填写客户信息*/}
          <div className="slip-cont" id="components-anchor-base">
            <div className="slip-cont-title">
              <span className="span-bdw">基本信息</span>
            </div>
            <div className="slip-cont-b">
              <div className="add-cont">
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label className="ant-form-item-required"><span className="span-left">联系电话</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <div className="ant-form-item-control">
                      <Input size="large" placeholder="请输入联系电话"/>
                    </div>
                  </Col>
                  <Col span={5}>
                    <div className="error-tip"><Icon type="minus-circle-o"/>请输入联系电话</div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">客户姓名</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <div className="ant-form-item-control">
                      <Input size="large" placeholder="请输入客户姓名"/>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">月嫂头像</span></label>
                    </div>
                  </Col>
                  <Col span={16}>
                    <div className="ant-form-item-control">
                      <div className="clearfix">
                        <Upload
                          action=""
                          listType="picture-card"
                          fileList={fileList}
                          onPreview={this.handlePreview}
                          onChange={this.handleChange}
                        >
                          {fileList.length >= 1 ? null : uploadButton}
                        </Upload>
                        <Modal visible={previewVisible}
                               footer={null}
                               onCancel={this.handleCancel}
                        >
                          <img alt="example" style={{width: '100%'}} src={previewImage}/>
                        </Modal>
                      </div>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">服务地址</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <AddressSelect/>
                  </Col>
                  <Col span={5}>
                    <Input placeholder="详细街道地址" size="large" suffix={<Icon type="environment"/>}/>
                  </Col>
                  <Col span={5}>
                    <Input placeholder="详细地址，如楼层/门牌号" size="large"/>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">订单来源</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <div className="ant-form-item-control">
                      <Select defaultValue="选择订单来源" size="large">
                        <Option value="选择订单来源">选择订单来源</Option>
                      </Select>
                    </div>
                  </Col>
                  <Col span={5}>
                    <a className="col-blue add-cont-link" onClick={() => this.showModalOrderSource(true)}
                       href="javascript:void(0)">管理订单来源</a>
                    {/*弹窗--管理订单来源*/}
                    <Modal
                      title="管理订单来源"
                      wrapClassName="vertical-center-modal"
                      visible={this.state.ModalOrderSource}
                      onCancel={() => this.showModalOrderSource(false)}
                      footer={null}
                    >
                      <div className="ordersource-modal">
                        <Table bordered dataSource={dataOrderSource} columns={columns} pagination={false}/>
                        <div className="foot-add"><Button type="primary" icon="plus">新增来源</Button></div>
                      </div>
                    </Modal>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">饮食偏好</span></label>
                    </div>
                  </Col>
                  <Col className="ant-col-auto">
                    <CheckBox data={data_food}></CheckBox>
                  </Col>
                  <Col span={5}>
                    <Input size="large" placeholder="请输入其他饮食偏好"/>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">饮食偏好</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <Row gutter={16}>
                      <Col className="ant-col-auto">
                        <CheckBox data={data_food2}></CheckBox>
                      </Col>
                      <Col span={5}>
                        <div className="error-tip"><Icon type="minus-circle-o"/>错误提示</div>
                      </Col>
                    </Row>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">其他信息</span></label>
                    </div>
                  </Col>
                  <Col span={12}>
                    <div className="ant-form-item-control">
                      <div className="textarea-surplus">
                        <Input type="textarea" rows={6} placeholder="请输入其他 客户和订单相关备注信息"/>
                        <p>还可以输入140字</p>
                      </div>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">用工时间</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <RangePicker size="large"/>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">宝宝性别</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <CheckBox data={data_sex}></CheckBox>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">服务价格</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <div className="ant-form-item-control">
                      <Input size="large" placeholder="请输入愿意支付的心理价格"/>
                    </div>
                  </Col>
                  <Col span={2}><span className="danwei">元/月</span></Col>
                </Row>
              </div>
            </div>
          </div>
          {/*从业经历/家庭成员*/}
          <div className="slip-cont" id="components-anchor-family">
            <div className="slip-cont-title">
              <span className="span-bdw">从业经历/家庭成员</span>
            </div>
            <div className="slip-cont-b">
              <div className="add-cont">
                <div className="border-bom-dashed">
                  <ul>
                    <li>
                      <a href="#" className="col-red">删除</a>
                      <div className="info-text">
                        <Row gutter={16}>
                          <Col span={3} className="text-r">
                            <div className="ant-form-item-label">
                              <label><span className="span-left">姓名</span></label>
                            </div>
                          </Col>
                          <Col span={21}>
                            <div className="ant-form-item-control">
                              字段名
                            </div>
                          </Col>
                        </Row>
                        <Row gutter={16}>
                          <Col span={3} className="text-r">
                            <div className="ant-form-item-label">
                              <label><span className="span-left">关系</span></label>
                            </div>
                          </Col>
                          <Col span={21}>
                            <div className="ant-form-item-control">
                              字段名
                            </div>
                          </Col>
                        </Row>
                      </div>
                    </li>
                    <li>
                      <a href="#" className="col-red">删除</a>
                      <div className="info-text">
                        <Row gutter={16}>
                          <Col span={3} className="text-r">
                            <div className="ant-form-item-label">
                              <label><span className="span-left">姓名</span></label>
                            </div>
                          </Col>
                          <Col span={21}>
                            <div className="ant-form-item-control">
                              字段名
                            </div>
                          </Col>
                        </Row>
                        <Row gutter={16}>
                          <Col span={3} className="text-r">
                            <div className="ant-form-item-label">
                              <label><span className="span-left">关系</span></label>
                            </div>
                          </Col>
                          <Col span={21}>
                            <div className="ant-form-item-control">
                              字段名
                            </div>
                          </Col>
                        </Row>
                      </div>
                    </li>
                  </ul>
                </div>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label className="ant-form-item-required"><span className="span-left">姓名</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <div className="ant-form-item-control has-error">
                      <Input size="large" placeholder="请输入姓名"/>
                    </div>
                  </Col>
                  <Col span={5}>
                    <div className="error-tip"><Icon type="minus-circle-o"/>错误提示信息</div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">关系</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <div className="ant-form-item-control">
                      <Input size="large" placeholder="请输入关系"/>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label ant-form-item-label-empty">
                      <label><span className="span-left">&nbsp;</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <div className="ant-form-item-control">
                      <Button type="primary" icon="plus">添加</Button>
                    </div>
                  </Col>
                </Row>
              </div>
            </div>
          </div>
          {/*月嫂相册视频信息*/}
          <div className="slip-cont" id="components-anchor-picture-vedio">
            <div className="slip-cont-title">
              <span className="span-bdw">月嫂相册视频信息</span>
            </div>
            <div className="slip-cont-b">
              <div className="add-cont">
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">月嫂生活照</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <div className="ant-form-item-control">
                      <div className="clearfix">
                        <Upload
                          action=""
                          listType="picture-card"
                          fileList={fileList}
                          onPreview={this.handlePreview}
                          onChange={this.handleChange}
                        >
                          {fileList.length >= 4 ? null : uploadButton}
                        </Upload>
                        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                          <img alt="example" style={{width: '100%'}} src={previewImage}/>
                        </Modal>
                      </div>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">月嫂身份证照片</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <div className="ant-form-item-control">
                      <div className="clearfix">
                        <Upload
                          action=""
                          listType="picture-card"
                          fileList={fileList}
                          onPreview={this.handlePreview}
                          onChange={this.handleChange}
                        >
                          {fileList.length >= 2 ? null : uploadButton}
                        </Upload>
                        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                          <img alt="example" style={{width: '100%'}} src={previewImage}/>
                        </Modal>
                      </div>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">月嫂证件照</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <div className="ant-form-item-control">
                      <div className="clearfix">
                        <Upload
                          action=""
                          listType="picture-card"
                          fileList={fileList}
                          onPreview={this.handlePreview}
                          onChange={this.handleChange}
                        >
                          {fileList.length >= 4 ? null : uploadButton}
                        </Upload>
                        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                          <img alt="example" style={{width: '100%'}} src={previewImage}/>
                        </Modal>
                      </div>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">月嫂入职合同照</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <div className="ant-form-item-control">
                      <div className="clearfix">
                        <Upload
                          action=""
                          listType="picture-card"
                          fileList={fileList}
                          onPreview={this.handlePreview}
                          onChange={this.handleChange}
                        >
                          {fileList.length >= 4 ? null : uploadButton}
                        </Upload>
                        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                          <img alt="example" style={{width: '100%'}} src={previewImage}/>
                        </Modal>
                      </div>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">视频上传单独做</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <div className="ant-form-item-control">
                      <div className="clearfix">
                                                    <span className="">
                                                        <div className="ant-upload-list ant-upload-list-picture-card">
                                                            <div
                                                              className="ant-upload-list-item ant-upload-list-item-done">
                                                                <div className="ant-upload-list-item-info">
                                                                    <span>
                                                                        <a className="ant-upload-list-item-thumbnail">
                                                                            <img
                                                                              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                                                                              alt="xxx.png"/>
                                                                        </a>
                                                                        <a className="ant-upload-list-item-name"
                                                                           title="xxx.png">xxx.png</a>
                                                                    </span>
                                                                </div>
                                                                <span className="ant-upload-list-item-actions">
                                                                    <a title="预览文件">
                                                                        <i className="anticon anticon-play-circle-o"></i>
                                                                    </a>
                                                                    <i title="删除文件"
                                                                       className="anticon anticon-delete"></i>
                                                                </span>
                                                            </div>
                                                            <div className="ant-upload-list-item ant-upload-list-item-done">
                                                              <div className="ant-upload-list-item-info">
                                                                <a className="ant-upload-list-item-thumbnail">
                                                                  <img src="//movie.qianmi.com/16b9a0d3-00fe-4151-a573-6f06abcc3c19.mp4?vframe/png/offset/1/w/150/h/150&amp;_v=1501825066915" alt="生活照" />
                                                                </a>
                                                                <span className="ant-upload-list-item-name" title=""></span>
                                                              </div>
                                                              <span className="ant-upload-list-item-actions">
                                                                <a title="预览文件">
                                                                  <i className="anticon anticon-play-circle-o"></i>
                                                                </a>
                                                                <i title="删除文件"
                                                                   className="anticon anticon-delete">
                                                                </i>
                                                              </span>
                                                            </div>
                                                        </div>
                                                        <div
                                                          className="ant-upload ant-upload-select ant-upload-select-picture-card">
                                                            <span tabindex="0" className="ant-upload" role="button">
                                                                <input className="file-vedio" type="file" accept=""/>
                                                                <div>
                                                                    <i className="anticon anticon-upload"></i>
                                                                    <div className="ant-upload-text">上传</div>
                                                                </div>
                                                            </span>
                                                        </div>
                                                        <div
                                                          className="ant-upload ant-upload-select ant-upload-select-picture-card">
                                                            <span tabindex="0" className="ant-upload" role="button">
                                                                <input className="file-vedio" type="file" accept=""/>
                                                                <div>
                                                                    <i className="anticon anticon-upload"></i>
                                                                    <div className="ant-upload-text">上传</div>
                                                                </div>
                                                            </span>
                                                            <div className="jdt-bg">
                                                                <Progress type="circle" percent={70} width={40}/>
                                                            </div>
                                                        </div>
                                                        <div
                                                          className="ant-upload ant-upload-select ant-upload-select-picture-card">
                                                            <span tabindex="0" className="ant-upload" role="button">
                                                                <input className="file-vedio" type="file" accept=""/>
                                                                <div>
                                                                    <i className="anticon anticon-upload"></i>
                                                                    <div className="ant-upload-text">上传</div>
                                                                </div>
                                                            </span>
                                                            <div className="jdt-bg">
                                                                <Progress type="circle" percent={100} width={40}/>
                                                            </div>
                                                        </div>
                                                    </span>
                      </div>
                      <Modal
                        title="视频预览"
                        wrapClassName="vertical-center-modal"
                        visible={this.state.Modalvideo}
                        onCancel={() => this.showModalvideo(false)}
                        footer={null}
                      >
                        <video className="video" width='100%' height='100%' controls="controls"
                               src="http://movie.qianmi.com/c77f3875-be2b-4634-928e-73e51ec4d788.mp4"></video>
                      </Modal>
                    </div>
                  </Col>
                </Row>
              </div>
            </div>
          </div>
        </div>
        <div className="slip-footer">
          <div className="slip-foot-center" id="slipFootCenter">
            <Button type="primary" htmlType="submit">保存</Button>
          </div>
        </div>
      </div>
  )
  }
  }